<template>
	<div class="alarmConfiguration zy-content">
		<search :columns="searchData" @getSearch="changeNum" key="search"></search>
		<div class="alarmConfiguration">
			<div class="list-layout mt16">
				<div class="btns clear">
					<span class="title">物料信息</span>
					<Button @click="exportTemplateClick">
						{{ $t('common.Export') }}
					</Button>
				</div>
				<!-- 表格 -->
				<div class="tableContent">
					<Table
						class="resizable-table"
						border
						highlight-row
						@on-column-width-resize="
							(a, b, c, d) => {
								onColumnWidthResize(a, b, c, d, 'mBom');
							}
						"
						:columns="mBomList"
						ellipsis
						ref="selection"
						stripe
						:data="dataArr"
						@on-selection-change="onSelectChange"
						@on-current-change="currentChange"
					>
						<template slot-scope="{ row }" slot="action">
							<span class="operationBtn" @click="confirm(row)">
								<i class="iconfont zy-common-jinyong"></i>
								{{ status === '1' ? $t('禁用') : $t('启用') }}
							</span>
							<span class="operationBtn" @click="createfaultCodeShowH(row)">
								<i class="iconfont zy-common-bianji"></i>
								{{ $t('common.Edit') }}
							</span>
							<span class="operationBtn" @click="delPrrShowH(row)">
								<i class="iconfont zy-common-shanchu"></i>
								{{ $t('common.Delete') }}
							</span>
						</template>
					</Table>
				</div>
				<!-- 分页 -->
				<div class="pageWrap mt16">
					<pageLeftTitle :total="total" :selected="delIds.length" />
					<Page
						:total="total"
						:page-size="pageSize"
						:page-size-opts="pageSizeOption"
						:current="pageNum"
						@on-change="changePageNum"
						@on-page-size-change="changePageSize"
						show-sizer
						show-total
					/>
				</div>
			</div>

			<!-- 物料关联 -->
			<div class="list-layout mt16">
				<div class="btns clear">
					<span class="title">物料关联</span>
					<Button @click="createfaultCodeShowH('add', {})">
						{{ $t('common.New') }}
					</Button>
				</div>
				<div class="tableContent">
					<Table
						class="resizable-table"
						border
						@on-column-width-resize="onColumnWidthResize"
						:columns="columnsList"
						ellipsis
						ref="selection"
						stripe
						:data="dataArr1"
						@on-selection-change="onSelectChange1"
					>
						<template slot-scope="{ row }" slot="action">
							<span class="operationBtn" v-if="row.isSync == '否'" @click="createfaultCodeShowH('edit', row)">
								<i class="iconfont zy-common-bianji"></i>
								{{ $t('common.Edit') }}
							</span>
							<span class="operationBtn" @click="delPrrShowH(row)">
								<i class="iconfont zy-common-shanchu"></i>
								{{ $t('common.Delete') }}
							</span>
						</template>
					</Table>
				</div>
				<!-- 分页 -->
				<div class="pageWrap mt16">
					<pageLeftTitle :total="total1" :selected="delIds1.length" />
					<Page
						:total="total1"
						:page-size="pageSize1"
						:page-size-opts="pageSizeOption"
						:current="pageNum1"
						@on-change="changePageNum1"
						@on-page-size-change="changePageSize1"
						show-sizer
						show-total
					/>
				</div>
			</div>
			<!-- 新增编辑 -->
			<Modal :mask-closable="false" v-model="create" :title="addtitle" class="modal-content-layout" width="50%">
				<div class="content-item">
					<Row>
						<Col class="pd16">
							<Form ref="form" :disabled="disabled" class="formList" :model="formItem" label-position="top" :rules="ruleValidate">
								<Row :gutter="20">
									<Col span="12">
										<FormItem label="物料编号" prop="materialCode">
											<Select
												v-model="formItem.materialCode"
												filterable
												v-if="addtitle == '新增'"
												clearable
												:remote-method="remoteMethod"
												@on-change="changeMaterialCode"
												:max-tag-count="1"
												:placeholder="`${$t('common.selectInfo')}`"
											>
												<Option v-for="item of materialList" :value="item.materialCode" :key="item.id" :label="item.materialCode"></Option>
											</Select>
											<Input readonly v-model="formItem.materialCode" v-else></Input>
										</FormItem>
									</Col>
									<Col span="12">
										<FormItem label="基础计量" prop="basicUnit">
											<Input type="text" v-model="formItem.basicUnit" :placeholder="`${$t('common.inputInfo')}`" />
										</FormItem>
									</Col>
								</Row>
								<Row :gutter="20">
									<Col span="12">
										<FormItem label="定额用量" prop="grossDosage">
											<Input
												type="text"
												@on-keyup="keyUp($event, 'grossDosage', true)"
												v-model="formItem.grossDosage"
												:placeholder="`${$t('common.inputInfo')}`"
											/>
										</FormItem>
									</Col>
									<Col span="12">
										<FormItem label="定额用量单位" prop="grossDosageUnit">
											<Select v-model="formItem.grossDosageUnit" filterable clearable :max-tag-count="1" :placeholder="`${$t('common.selectInfo')}`">
												<Option v-for="item of dwList" :value="item.value" :key="item.id" :label="item.value"></Option>
											</Select>
										</FormItem>
									</Col>
								</Row>
							</Form>
						</Col>
					</Row>
				</div>
				<div slot="footer">
					<Button type="default" @click="create = false">
						{{ $t('common.Cancle') }}
					</Button>
					<Button type="primary" v-if="!disabled" :loading="loading" @click="addOk('form')">{{ $t('maintenance.Confirmed') }}</Button>
				</div>
			</Modal>
			<!-- 请确认是否删除弹框 -->
			<Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
				<div class="icon red">
					<i class="iconfont zy-common-shanchu"></i>
				</div>
				<p class="title">
					<span>{{ $t('common.confirmDelete') }}</span>
				</p>
				<div slot="footer">
					<Button type="default" @click="delFaultCodeShowF = false">
						{{ $t('common.Cancle') }}
					</Button>
					<Button type="primary" :loading="loading" @click="deleteOk">
						{{ $t('maintenance.Confirmed') }}
					</Button>
				</div>
			</Modal>
		</div>
	</div>
</template>

<script>
import { getMaterialList, getMaterialAssociationPage } from './api';
import search from '@/components/curd/searchList.vue';
import fileDownload from 'js-file-download';
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'storeHouse', //仓库配置
	components: { search },
	mixins: [toggleTableOperation],
	data() {
		return {
			searchData: [
				{
					title: '物料编号',
					key: 'materialCode',
				},
				{
					title: '物料型号',
					key: 'materialModel',
				},
				{
					title: '物料名称',
					key: 'materialName',
				},
				{
					title: '物料类型',
					key: 'materialType',
					type: 'select',
					dicUrl: '/dms/faultCategory/dictList?name=物料类型',
					params: {
						label: 'value',
						value: 'value',
					},
				},
				{
					title: '是否关联',
					key: 'isAss',
					type: 'select',
					dicData: [
						{ label: '是', value: '是' },
						{ label: '否', value: '否' },
					],
				},
				{
					title: '关联物料编号',
					key: 'assMaterialCode',
				},
				{
					title: '关联物料名称',
					key: 'assMaterialName',
				},
				{
					title: '是否研发领料',
					key: 'isResearchMaterial',
					type: 'select',
					dicData: [
						{ label: '是', value: '是' },
						{ label: '否', value: '否' },
					],
				},
				{
					title: '状态',
					key: 'state',
					type: 'select',
					dicUrl: '/dms/faultCategory/dictList?name=物料状态',
					params: {
						label: 'value',
						value: 'value',
					},
				},
			],
			columns: [
				{
					key: 'selection',
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					title: '物料编号',
					key: 'materialCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料名称',
					key: 'materialName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料型号',
					key: 'materialModel',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '状态',
					key: 'state',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料属性',
					key: '',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '记件单价(元)',
					key: 'piecePrice',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '加工单价(元)',
					key: '',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '包规数量',
					key: 'packageQuantity',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '包规单位',
					key: 'packageQuantityUnit',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '净重',
					key: 'weight',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '毛重',
					key: 'grossWeight',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '净重单位',
					key: 'weightUnit',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '基础单位',
					key: 'basicUnit',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料面积',
					key: 'materialArea',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '理论利用率',
					key: 'utilizationRate',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '材料牌号',
					key: 'materialMark',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '客户料号',
					key: 'customMaterialCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '旧物料编号',
					key: 'oldMaterialCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '料宽属性',
					key: 'materialWidth',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '备注',
					key: '',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '是否关联',
					key: 'isAss',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '是否研发领料',
					key: 'isResearchMaterial',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '维护人',
					key: '',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '维护时间',
					key: 'maintainerTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				// {
				//   title: "操作",
				//   slot: "action",
				//   fixed: "right",
				//   minWidth: 260,
				//   align: "center",
				// },
			],
			columns1: [
				{
					key: 'selection',
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					title: '物料编号',
					key: 'materialCode',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料型号',
					key: 'materialModel',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料名称',
					key: 'materialName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料类型',
					key: 'materialType',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料属性',
					key: 'moldModel',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '齐套件',
					key: 'moldModel',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '记件单价(元)',
					key: 'piecePrice',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '加工单价(元)',
					key: 'maintenanceMode',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '包规数量',
					key: 'packageQuantity',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '重量',
					key: 'weight',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '重量单位',
					key: 'weightUnit',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '基础计量',
					key: 'basicUnit',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '定额用量',
					key: 'grossDosage',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '定额用量单位',
					key: 'grossDosageUnit',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '维护人',
					key: 'maintainer',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '维护时间',
					key: 'maintainerTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作',
					slot: 'action',
					fixed: 'right',
					minWidth: 260,
					align: 'center',
				},
			],
			ruleValidate: {
				grossDosage: [{ required: true, message: this.$t('common.inputInfo') }],
				basicUnit: [{ required: true, message: this.$t('common.inputInfo') }],
				materialCode: [{ required: true, message: this.$t('common.selectInfo') }],
				grossDosageUnit: [{ required: true, message: this.$t('common.selectInfo') }],
			},
			moldStateList: [
				{
					label: '在用',
					value: '1',
				},
				{
					label: '报废',
					value: '2',
				},
				{
					label: '在库',
					value: '3',
				},
			],
			disabled: false,
			importExcelState: false /*批量导入*/,
			formItem: {},
			addtitle: '',
			allCheck: false,
			loading: false,
			create: false,
			searchParams: {},
			pageNum: 1,
			pageSize: 10,
			total: 0,
			dataArr: [],

			pageNum1: 1,
			pageSize1: 10,
			total1: 0,
			dataArr1: [],

			delFaultCodeShowF: false, //是否显示删除弹窗
			pageSizeOption: [10, 20, 30, 40],
			delIds: [],
			selection: [],
			delIds1: [],
			selection1: [],

			deviceTypeList: [],
			materialList: [],
		};
	},
	mounted() {
		this.getTableColumnsWidth(this.columns, 'mBom');
		this.getTableColumnsWidth(this.columns1);
		this.searchList();
		this.getDictList();
		// this.getUserList();
	},
	methods: {
		keyUp(e, key, money) {
			if (!this.formItem[key]) {
				return (this.formItem[key] = '');
			}
			let num = '';
			console.log(e);
			if (money) {
				num = this.formItem[key].match(/^\d*(\.?\d{0,2})/g)[0];
			} else {
				num = this.formItem[key].replace(/^[^\d]+$/g, '').split('.')[0];
			}
			this.formItem[key] = `${num}`;
		},
		getDictList() {
			this.axios({
				url: '/dms/faultCategory/dictList',
				method: 'get',
				params: {
					name: '定额用量单位',
				},
			}).then((res) => {
				this.dwList = res.data;
			});
		},
		currentChange(row) {
			this.currentRow = row;
			this.getAssociationList();
		},
		changeMaterialCode(val) {
			const arg = this.materialList.find((item) => item.materialCode === val);
			if (arg) {
				this.formItem.basicUnit = arg.basicUnit;
			}
		},
		getAssociationList() {
			let params = {
				pageNum: this.pageNum1,
				pageSize: this.pageSize1,
				materialCode: this.currentRow.materialCode,
			};
			getMaterialAssociationPage(params).then((res) => {
				if (res.code === 200) {
					this.dataArr1 = res.data.records;
					this.total1 = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},

		reset() {
			this.searchParams = {};
			this.changeNum();
		},
		//分页
		changeNum(data) {
			this.pageNum = 1;
			this.searchParams = data;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},

		changeNum1(data) {
			this.pageNum1 = 1;
			this.searchParams1 = data;
			this.getAssociationList();
		},
		changePageSize1(pageSize) {
			this.pageSize1 = pageSize;
			this.getAssociationList();
		},
		changePageNum1(val) {
			this.pageNum1 = val;
			this.getAssociationList();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			getMaterialList(params).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.dataArr1 = [];
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		remoteMethod(materialCode) {
			let params = {
				pageNum: 1,
				pageSize: 99,
				materialCode,
			};
			getMaterialList(params).then((res) => {
				if (res.code === 200) {
					this.materialList = res.data.records;
				}
			});
		},
		check(row) {
			this.disabled = true;
			this.addtitle = `${this.$t('common.Check')}`;
			this.formItem = JSON.parse(JSON.stringify(row));
			this.create = true;
		},
		//增加或编辑
		createfaultCodeShowH(type, row) {
			this.$refs.form.resetFields();
			if (type == 'add') {
				if (this.delIds.length !== 1) {
					this.$Message.warning({
						content: '请选择一条数据',
						duration: 6,
						closable: true,
					});
					return;
				}
				this.addtitle = `${this.$t('common.New')}`;
				this.formItem = {
					maintenanceMode: null,
					productionMode: null,
					moldLife: null,
					cavityNum: null,
					score: null,
					lengths: null,
					thickness: null,
				};
			} else if (type == 'edit') {
				this.addtitle = `${this.$t('common.Edit')}`;
				this.formItem = {
					...row,
				};
			}
			this.disabled = false;
			this.create = true;
		},
		addOk(name) {
			this.$refs[name].validate((valid) => {
				if (!valid) {
					return;
				} else {
					this.loading = true;
					this.axios({
						url: this.formItem.id ? '/dms/bom/update' : '/dms/bom/save',
						method: this.formItem.id ? 'put' : 'post',
						data: {
							...this.formItem,
							productMaterialCode: this.delIds[0].materialCode,
						},
					}).then((res) => {
						this.loading = false;
						if (res.code === 200) {
							this.getAssociationList();
							this.$Message.success(this.formItem.id ? '编辑成功' : '新增成功');
							this.create = false;
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				}
			});
		},
		//勾选列表
		onSelectChange(selection) {
			let myArray = [];
			selection.map((item) => {
				myArray.push(item);
			});
			this.delIds = myArray;
			if (selection.length > 0) {
				this.allCheck = true;
			} else {
				this.allCheck = false;
			}
		},
		//批量删除
		delFaultCodeShowClick() {
			if (this.delIds.length == 0) {
				this.$Message.warning({
					content: `${this.$t('common.deleteItems')}`,
					duration: 6,
					closable: true,
				});
				return;
			} else {
				this.delFaultCodeShowF = true;
			}
		},
		//删除
		delPrrShowH(row) {
			//点击展示提示删除弹窗
			this.delFaultCodeShowF = true;
			this.delIds = [];
			this.delIds.push(row.id);
		},
		deleteOk() {
			this.loading = true;
			this.axios({
				url: '/dms/bom/delete',
				method: 'DELETE',
				data: this.delIds,
			}).then((res) => {
				this.loading = false;
				if (res.code === 200) {
					this.getAssociationList();
					this.$Message.success('删除成功');
					this.allCheck = false;
					this.delFaultCodeShowF = false;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		//导出
		exportTemplateClick() {
			let params = {
				delIds: this.delIds,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			const filName = '物料信息';
			this.axios({
				url: '/dms/bom/export',
				method: 'POST',
				data: params,
				responseType: 'blob',
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ivu-input-number {
	width: -webkit-fill-available;
}
</style>
